<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/product.css">
    <script src="./js/libs/jquery-1.12.3.js"></script>
    <script src="./js/libs/jquery.cookie.js"></script>

    <script src="./js/animate.tools.js"></script>
    <script src="./js/libs/layer/layer.js"></script>
    <script src="./js/product.js"></script>

    <script>

    </script>
</head>

<body>
    <div class="header" id="header"></div>
    <div class="main clearFixed" id="main">
        <div class="conTop">
            <div class="topBan clearFixed">
                <div class="comefrom fl">首页&gt;</div>
                <div class="compare fr">
                    <span class="tip fl">可以对比5个商品</span>
                    <dl class="proList fl">
                        <dd></dd>
                        <dd></dd>
                        <dd></dd>
                        <dd></dd>
                        <dd></dd>
                    </dl>
                    <button class="btn fl">马上对比</button>
                </div>
            </div>



        </div>
        <div class="liCon">
            <!-- 商品详情tab栏 -->
            <div class="ulLine">
                <ul class="tab clearFixed">
                    <li class="tab-item active">商品详情</li>
                    </li>
                    <li class="tab-item">用户评论(123)</li>
                    </li>
                    <li class="tab-item">具体参数</li>
                    </li>
                    <li class="tab-item">售后服务</li>
                    </li>
                    <li class="tab-item">商品咨询</li>
                    </li>
                    <!-- <li></li> -->
                    <!-- <li class="add">
                        <div class="addCart"><img src="./images/detailsPic/cart_03.jpg" alt=""> 加入购物车
                        </div>

                    </li> -->
                    <li>
                        <div class="goods">
                        </div>
                    </li>

                </ul>
            </div>

            <div class="details">
                <div class="proCon-details">
                    <!-- 商品详情 -->
                    <div class="detail-item selected">
                        <div class="txts ">
                            <div class=" line title" id="p_name"></div>

                            <!-- 商品图片及属性 -->
                            <div class="txtCon-attrs fl">
                                <!-- 图片轮播 -->
                                <div class="imgBox fl">
                                    <div class="imgInner">
                                        <ul class="middle-pic">
                                            <li><a href=""><img src="" alt=""></a></li>
                                            <li><a href=""><img src="" alt=""></a></li>
                                            <li><a href=""><img src="" alt=""></a></li>
                                            <li><a href=""><img src="" alt=""></a></li>
                                            <li><a href=""><img src="" alt=""></a></li>
                                        </ul>

                                        <div class="small-pic">
                                            <div class="smallInner">
                                                <ul>
                                                    <li><a href=""><img src="" alt=""></a></li>
                                                    <li><a href=""><img src="" alt=""></a></li>
                                                    <li><a href=""><img src="" alt=""></a></li>
                                                    <li><a href=""><img src="" alt=""></a></li>
                                                    <li><a href=""><img src="" alt=""></a></li>
                                                </ul>

                                            </div>
                                            <div class="arr">
                                                <span class="arrLeft">&lt;</span>
                                                <span class="arrRight">&gt;</span>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <!-- 商品属性 -->

                                <div class="itemAttr fl">
                                    <div class="line"><label
                                            for="">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;牌：</label>
                                        <span id="p_brand"></span>
                                    </div>
                                    <div class="line"><label for="">产品型号：</label><span id="p_model"></span></div>
                                    <div class="line"><label for="">新&nbsp;&nbsp;蛋&nbsp;&nbsp;价：</label><span
                                            class="doll">￥</span><span class="price" id="p_price"></span></div>
                                    <div class="line support"><label for="">商品支持:</label><a href=""><img
                                                src="./images/detailsPic/7day_03.jpg" alt=""></a></br><span
                                            class="no-support">不支持七天无理由退</span></div>
                                    <div class="line types">
                                        <label for="">型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
                                        <div class="models type1" id="p_models">
                                        </div>
                                    </div>
                                    <div class="line col">
                                        <label for="">颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色：</label>
                                        <div class="colors" id="p_colors">
                                        </div>
                                    </div>
                                    <div class="line">
                                        <label for="">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量：</label>
                                        <div class="number">
                                            <span class="decrease fl">-</span>
                                            <input name="count" class="count" id="p_number" value="1">
                                            <span class="increase fr">+</span>
                                        </div>
                                    </div>
                                    <div class="line opration">
                                        <div class="buy opt">立即购买</div>
                                        <div class="toCart opt">加入购物车</div>
                                        <div class="toLove">加入收藏夹</div>
                                        <div class="loved"><span class="spa1">☆</span><span class="spa2">40</span>
                                        </div>
                                        <div class="min">
                                            <img src="./images/detailsPic/min_03.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="txtCon-extend fl">
                                <div class="deNotice">
                                    <span><a href="">降价通知</a></span>
                                </div>
                                <div class="grade"><span>4.9</span>
                                    <img src="./images/detailsPic/grade.jpg" alt="">
                                    <p>已有138人评论</p>
                                </div>
                                <div class="qrcode">
                                    <img class="smallImgCode" src="./images/detailsPic/qrCode.jpg" alt="">
                                    <img class="bigImgCode" src="./images/detailsPic/imgCode2.png" alt="">

                                    <p>转到其手机上看</p>
                                </div>
                            </div>

                        </div>
                        <div class="pic clearFixed">
                            <p class="friendly">如果您发现商品信息不准确，<a href="#">欢迎纠错</a></p>
                            <img src="./images/detailsPic/7days.jpg" alt="">
                            <p class="pname"></p>
                            <div class="picCenter">
                                <img src="" alt="">
                                <img src="" alt="">
                                <img src="" alt="">
                            </div>


                        </div>
                    </div>
                    <div class="detail-item"></div>
                    <div class="detail-item"></div>
                    <div class="detail-item"></div>
                    <div class="detail-item"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer" id="footer"></div>
</body>

</html>